
// 1 引入 方法
import { createRouter ,createWebHashHistory } from "vue-router";

// 引入组件
import Films from '../views/films.vue'
import Cinemas from '../views/cinemas.vue'
// import Center from '../views/center.vue'
import NotFound from '../views/notFound.vue'
import Nowplaying from '../views/films/nowplaying.vue'
import Comingsoon from '../views/films/comingsoon.vue'
import Detail from '../views/detail.vue'
// import Login from '../views/login.vue'

const routes = [
    {
      path:'/login',
      name:'Login',
      component: () => import('../views/login.vue')
    },
    {
        path: '/',
        redirect: '/films', // 重定向
        // redirect:{
        //     name:'myFilms'
        // }
    },
    {
        path:'/films', // 路径名字
        name:'myFilms',
        component:Films ,// 哪个组件
        redirect: '/films/nowplaying',
        children:[
            {
                path:'/films/nowplaying', // 1 全部路径
                component: Nowplaying,
            },
            {
                path:'comingsoon', // 2 自动拼接路径
                component: Comingsoon,
            },
        ]
    },
    {
        path: '/detail/:mid',
        component: Detail
    },
    {
        path:'/cinemas', // 路径名字
        component:Cinemas ,// 哪个组件
    },
    {
        path:'/center', // 路径名字
        component: ()=>import('../views/center.vue') ,// 哪个组件
        meta:{
            requireAuth:true,// 需要登录
        }
    },
    // 如果没有匹配到我们的路径我们给个404页面
    {
        path:'/:pathMath(.*)*',
        name:'NotFound',
        component:NotFound,
    }
]

//2 创建一个对象
const router = createRouter({
    //为了简单起见，我们在这里使用 hash 模式。 #/film  #/center
    // history 模式 /film /center
   history: createWebHashHistory(),
   routes, // `routes: routes` 的缩写
})

// 全局拦截 全局前置守卫
router.beforeEach((to, from, next) => {
    // 登陆成功设置一个token
    let isAuthenticated = localStorage.getItem('token')
    // 跳转的不是登录页 并且没授权 并且是center页面 跳回到login页面
    // 第一种写法
    // if (to.name !== 'Login' && !isAuthenticated && to.fullPath !== '/center'){
    //第二种写法
    if (to.name !== 'Login' && !isAuthenticated && to.meta.requireAuth){
        next({ name: 'Login' })
    } else{
        next()
    }
})

// 后置钩子 它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。
router.afterEach((to, from) => {
    // sendToAnalytics(to.fullPath)
    // console.log('提交用户行为')
})


//3 导出对象
export default router
